<template>
	<view style="padding: 40rpx;">
    <view style="padding: 20rpx; margin:70rpx 0rpx; background-color: #fff; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0,.1); border-radius: 20rpx; ">
      <view style="margin: 50rpx 30rpx; font-size: 39rpx;color: #008000;">欢迎注册</view>
      <uni-forms  ref="user" :modelValue="user" :rules="rules" validate-trigger='blur'>
        <uni-forms-item name="username" required>
        	<uni-easyinput prefixIcon="person" type="text" v-model="user.username" placeholder="请输入姓名" />
        </uni-forms-item>
        <uni-forms-item name="password" required>
        	<uni-easyinput prefixIcon="locked" type="password" v-model="user.password" placeholder="请输入密码" />
        </uni-forms-item>
        <uni-forms-item>
          <button @click="register()" style="background-color: #008000; border-color: #008000; color: #fff; height: 70rpx; line-height: 70rpx;">注  册</button>
        </uni-forms-item>
        <uni-forms-item>
          <view style="text-align: right;">已有账号，请<navigator style="display: inline-block;color: #008000;
          margin-left: 5rpx; font-size: 30rpx;" url="/pages/login/login">登录</navigator></view>
        </uni-forms-item>
      </uni-forms>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					role:'用户'
				},
        rules: {
        	// 对username字段进行必填验证
        	username: {
        		// username 字段的校验规则
        		rules:[
        			// 校验 username 不能为空
        			{
        				required: true,
        				errorMessage: '请输入账号',
        			},
        			// 对username字段进行长度验证
        			{
        				minLength: 3,
        				maxLength: 10,
        				errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
        			}
        		],
        	},
          password: {
            //password字段的校验规则
            rules:[
            	// 校验 password 不能为空
            	{
            		required: true,
            		errorMessage: '请输入密码',
            	},
            	// 对password字段进行长度验证
            	{
            		minLength: 3,
            		maxLength: 10,
            		errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
            	}
            ],
            
            
          }
        }
			}
		},
    methods:{
      register(){
        this.$refs.user.validate().then(res => {
        	this.$request.post('/register',this.user).then(res => {
            if(res.code ==='200'){
              uni.showToast({
              icon:'success',
              title:'注册成功'
            })
            setTimeout(() =>{
              //跳转登录页面，对于导航页面用switchTab,指定页面navigateTo
            uni.navigateTo({
              url:'/pages/login/login'
            })
            },500)
            }else{
            //错误提示显示
            uni.showToast({
              icon:'error',
              title:res.msg
            })
          }
        })
      }).catch(err => {
         uni.hideLoading()
         console.log('表单错误信息：', err);
      })
         }
    }
    }
</script>

<style>

</style>
